<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="close"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button type="primary" style="padding-left: 8px; padding-right: 8px" @click="clearModel"> 清除条件 </a-button>
      <a-button style="padding-left: 8px; padding-right: 8px" @click="close"> 关闭</a-button>
      <a-button type="primary" style="padding-left: 8px; padding-right: 8px" @click="handleOk"> 确定</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div style="margin: 0 auto" :class="{ isCheck: isCheck }">
        <a-radio-group v-model="model.timeType" @change="changeTimeType" style="width: 100%">
          <table class="table table-striped table-bordered" align="center" valign="center">
            <tr>
              <td class="column" colspan="1">账套/核算单元</td>
              <td class="value" colspan="3">
                <a-input @click.native="openOrganModel" v-model="model.accName" readOnly placeholder="请选择机构" />
              </td>
            </tr>
            <tr>
              <td class="column">
                <a-radio value="1">按期间</a-radio>
              </td>
              <td class="value">
                <a-month-picker
                  :disabled="model.timeType != 1"
                  style="width: 100%"
                  format="YYYY-MM"
                  valueFormat="YYYY-MM"
                  placeholder="请选择期间"
                  v-model="model.startTime"
                />
              </td>
              <td class="column" style="text-align: center">至</td>
              <td class="value">
                <a-month-picker
                  :disabled="model.timeType != 1"
                  style="width: 100%"
                  format="YYYY-MM"
                  valueFormat="YYYY-MM"
                  placeholder="请选择期间"
                  v-model="model.endTime"
                />
              </td>
            </tr>
            <tr>
              <td class="column">
                <a-radio value="2">按日期</a-radio>
              </td>
              <td class="value">
                <j-date style="width: 100%" :disabled="model.timeType != 2" v-model="model.startTime"></j-date>
              </td>
              <td class="column" style="text-align: center">至</td>
              <td class="value">
                <j-date style="width: 100%" :disabled="model.timeType != 2" v-model="model.endTime"></j-date>
              </td>
            </tr>
            <!-- <tr>
              <td class="column">查询类型</td>
              <td class="value" colspan="4">
                <j-dict-select-tag
                  style="width: 100%"
                  v-model="model.queryType"
                  placeholder="请选择查询类型"
                  dictCode="queryType"
                />
              </td>
            </tr> -->
          </table>
        </a-radio-group>
      </div>
      <a-row>
        <a-col :span="12">
          <AssistTable ref="AssistTable" v-model="assistCode" @onSelectAssist="onSelectAssist" @sendAssisCode="getAssisCode">
          </AssistTable>
        </a-col>
        <a-col :span="12">
          <SubjectTable ref="SubjectTable" v-model="assistCode" @onSelectSubject="onSelectSubject"></SubjectTable>
        </a-col>
      </a-row>
    </a-spin>

    <CheckOrganModal ref="departModal" @ok="updateQueryParam"></CheckOrganModal>
  </a-modal>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import CheckOrganModal from '../testcomponent/CheckOrganModal'
import AssistTable from '../testcomponent/modules/AssistTable'
import SubjectTable from '../testcomponent/modules/SubjectTable'
import { SearchModalMixin } from '../mixins/SearchModalMixin'
import moment from 'moment'
export default {
  name: 'SearchModel',
  mixins: [SearchModalMixin],
  components: {
    CheckOrganModal,
    AssistTable,
    SubjectTable,
  },
  data() {
    return {
      title: '辅助余额表查询条件',
      visible: false,
      model: {
        accCode: '',
        accName: '',
        startTime: moment().format('YYYY-MM-01'),
        endTime: moment().format('YYYY-MM-') + moment().daysInMonth(),
        unitId: '',
        assistType: '',
        assistTypeText: '',
        subjectCode: '',
        subjectName: '',
        timeType: '2',
      },
      isCheck: false,
      assistCode: '',
      confirmLoading: false,
      url: {
        edit: '/investigateSasac/edit',
      },
    }
  },
  created() {},
  watch: {
    $route: {
      handler: function (to) {
        if (Object.keys(to.params).length && to.params.from == 'sjxmss') {
          this.edit()
          let { accName, accId, unitId } = to.params

          let { endDate, startDate } = JSON.parse(to.params.returnRecord)
          this.model.startTime = startDate
          this.model.endTime = endDate

          this.model.accName = accName
          this.model.accCode = accId
          this.model.unitId = unitId
        }
      },
      immediate: true,
    },
  },
  methods: {
    clearModel() {
      this.model = this.$options.data().model
      this.$refs.AssistTable.clear()
      this.$refs.SubjectTable.clear()
      this.$emit('clear')
    },
    handleOk() {
      if (this.model.subjectCode == undefined || this.model.subjectCode == '' || this.assistCode == '') {
        this.$message.warning('请选择辅助类别和科目!')
        return
      }
      // if(this.model.assistType == undefined){
      //   this.model.assistType= this.assistCode
      // }
      let { startTime, endTime } = this.model
      if (this.compareTime(startTime, endTime)) {
        this.$emit('ok', this.model)
        this.visible = false
      }
    },
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    checkedRows(val) {
      console.log(7766, val)
    },
    // 获取选择的辅助项目
    onSelectAssist(assistCode) {
      console.log('assistCode------->',assistCode);
      this.model.assistCode = assistCode
    },
    // 获取选择的辅助类别
    getAssisCode(data) {
      this.model.assistType = data.assistCode
      this.model.assistTypeText = data.assistName
    },
    changeTimeType(e) {
      if (e.target.value == 1) {
        this.model.startTime = moment().format('YYYY-MM')
        this.model.endTime = moment().format('YYYY-MM')
      } else {
        this.model.startTime = moment().format('YYYY-MM-01')
        this.model.endTime = moment().format('YYYY-MM-') + moment().daysInMonth()
      }
    },
  },
}
</script>

<style scoped>
</style>
<style lang="less" scoped>
@import '../../../css/checkAndEditNoBorder.less';

.table-bordered /deep/ .ant-col-sm-16 {
  width: 100%;
}

.right {
  .main {
    padding: 10px;
    background-color: #f1f5ff;
  }
}

.box {
  padding: 20px;
}
</style>